<template>
    <div class="user-monitor public-box">
        <el-row :gutter="20">
            <el-col :span="24">
                <v-chart :options="onlineNum" auto-resize />
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <v-chart :options="loginNum" auto-resize />
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <v-chart :options="registerNum" auto-resize />
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <v-chart :options="UserOperation" auto-resize />
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'UserMonitor',
    data() {
        return {
            // 每日在线人数柱状图
            onlineNum: {
                color: ['#45db5d'],
                title: {
                    text: '八月每日在线用户统计',
                    left:'center',
                    top: 10,
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['2018-08-01', '2018-08-02', '2018-08-03', '2018-08-04', '2018-08-05', '2018-08-06', '2018-08-07', '2018-08-08',
                            '2018-08-09', '2018-08-10', '2018-08-12', '2018-08-13', '2018-08-14', '2018-08-15', '2018-08-16', '2018-08-17',
                            '2018-08-18', '2018-08-19', '2018-08-20', '2018-08-21', '2018-08-22', '2018-08-23', '2018-08-24', '2018-08-25',
                            '2018-08-26', '2018-08-27', '2018-08-28', '2018-08-29', '2018-08-30', '2018-08-31',
                        ],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name: '在线人数',
                        nameLocation: 'center',
                        nameTextStyle: {
                            padding: [0, 0, 20, 0]
                        }
                    }
                ],
                series : [
                    {
                        name:'每日在线人数',
                        type:'bar',
                        barWidth: '60%',
                        data:[10, 52, 200, 334, 390, 110, 220, 123, 52, 312, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220,
                            10, 52, 12, 334, 245, 330, 220, 10, 52
                        ]
                    }
                ]
            },
            // 每日登陆统计信息
            loginNum: {
                color: ['#45db5d'],
                title: {
                    text: '八月每日登陆次数统计',
                    left:'center',
                    top: 10,
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['2018-08-01', '2018-08-02', '2018-08-03', '2018-08-04', '2018-08-05', '2018-08-06', '2018-08-07', '2018-08-08',
                            '2018-08-09', '2018-08-10', '2018-08-12', '2018-08-13', '2018-08-14', '2018-08-15', '2018-08-16', '2018-08-17',
                            '2018-08-18', '2018-08-19', '2018-08-20', '2018-08-21', '2018-08-22', '2018-08-23', '2018-08-24', '2018-08-25',
                            '2018-08-26', '2018-08-27', '2018-08-28', '2018-08-29', '2018-08-30', '2018-08-31',
                        ],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name: '登陆次数',
                        nameLocation: 'center',
                        nameTextStyle: {
                            padding: [0, 0, 20, 0]
                        }
                    }
                ],
                series : [
                    {
                        name:'每日登陆次数',
                        type:'line',
                        barWidth: '60%',
                        data:[10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220, 10, 52
                        ]
                    }
                ]
            },
            // 每日注册量统计图
            registerNum: {
                color: ['#45db5d'],
                title: {
                    text: '八月每日注册量统计',
                    left:'center',
                    top: 10,
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['2018-08-01', '2018-08-02', '2018-08-03', '2018-08-04', '2018-08-05', '2018-08-06', '2018-08-07', '2018-08-08',
                            '2018-08-09', '2018-08-10', '2018-08-12', '2018-08-13', '2018-08-14', '2018-08-15', '2018-08-16', '2018-08-17',
                            '2018-08-18', '2018-08-19', '2018-08-20', '2018-08-21', '2018-08-22', '2018-08-23', '2018-08-24', '2018-08-25',
                            '2018-08-26', '2018-08-27', '2018-08-28', '2018-08-29', '2018-08-30', '2018-08-31',
                        ],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name: '注册量',
                        nameLocation: 'center',
                        nameTextStyle: {
                            padding: [0, 0, 20, 0]
                        }
                    }
                ],
                series : [
                    {
                        name:'每日注册人数',
                        type:'bar',
                        barWidth: '60%',
                        data:[10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220, 10, 52
                        ]
                    }
                ]
            },
            //  用户操作统计
            UserOperation: {
                color:['#45db5d','#ffaa00','#ff7467','#685289','#e89084','#669acc'],
                title : {
                    text: '某APP功能访问统计',
                    subtext: '纯属虚构',
                    x:'center',
                    top: 20
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '60%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
        }
    },
    props: {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    methods: {

    },
    created() {

    },
    mounted() {

    }
}
</script>

<style scoped lang="less">
.user-monitor {
    /deep/ .echarts {
        height: 500px;
        width: 100%;
        border: 1px #ccc solid;
        border-radius: 5px;
        margin-top: 10px;
    }
}
</style>
